<script setup lang="ts">
import { ref, computed } from 'vue';

const rawNginxConfig = ref(`worker_processes  auto;

events {
    worker_connections  65535;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    client_max_body_size 500m;
    # 添加安全响应头
    add_header X-Frame-Options "DENY";  # 防止点击劫持
    add_header X-XSS-Protection "1; mode=block";  # 启用 XSS 保护
    add_header X-Content-Type-Options "nosniff";  # 防止 MIME 类型嗅探
    server_tokens off;
    log_format  main  escape=json '$remote_addr\t$remote_user\t$time_local\t$request\t'
                      '$status\t$body_bytes_sent\t$request_body\t'
                      '$http_user_agent"\t$http_referer\t$http_x_forwarded_for\t'
                      '$upstream_connect_time\t$upstream_response_time\t$upstream_addr';

    access_log  /data/nginx/log/access.log  main;
    error_log   /data/nginx/log/error.log ;

    vhost_traffic_status_filter_by_host on;
    vhost_traffic_status_zone;

    sendfile        on;
    tcp_nopush     on;
    tcp_nodelay         on;
    keepalive_timeout  65;
    keepalive_requests 10000;
    types_hash_max_size 2048;

    include /usr/local/nginx/conf.d/*.conf;
    server {
        listen 8098;
        location /status {
            vhost_traffic_status_display;
            vhost_traffic_status_display_format html;
        }
  }
}
include /usr/local/nginx/tcp.d/*.conf;`);

const formattedNginxConfig = computed(() => {
	return formatNginxConfig(rawNginxConfig.value);
});

function formatNginxConfig(config: string): string {
	if (!config.trim()) return '';

	// 按行分割，保持原有的换行结构
	const lines = config.split('\n');
	const formattedLines: string[] = [];
	let indentLevel = 0;

	for (let i = 0; i < lines.length; i++) {
		const line = lines[i];
		const trimmedLine = line.trim();

		// 跳过空行，但保留空行结构
		if (!trimmedLine) {
			formattedLines.push('');
			continue;
		}

		// 先检查是否是结束大括号，需要减少缩进
		if (trimmedLine === '}') {
			indentLevel = Math.max(0, indentLevel - 1);
		}

		// 添加制表符缩进
		formattedLines.push('\t'.repeat(indentLevel) + trimmedLine);

		// 然后检查是否是开始大括号，需要增加缩进
		if (trimmedLine.endsWith('{') && !trimmedLine.startsWith('#')) {
			indentLevel++;
		}
	}

	return formattedLines.join('\n');
}
</script>

<template>
	<div style="flex: 0 0 100%">
		<div style="max-width: 600px" mx-auto mb-5 flex gap-2>
			<c-button
				@click="rawNginxConfig = formattedNginxConfig"
				:disabled="!rawNginxConfig.trim()"
				flex-1>
				格式化配置
			</c-button>
			<c-button
				@click="rawNginxConfig = ''"
				:disabled="!rawNginxConfig.trim()"
				flex-1
				type="warning">
				清空
			</c-button>
		</div>
	</div>

	<n-form-item label="您的 Nginx 配置文件">
		<c-input-text
			v-model:value="rawNginxConfig"
			placeholder="在此处粘贴您的 Nginx 配置文件..."
			rows="20"
			multiline
			autocomplete="off"
			autocorrect="off"
			autocapitalize="off"
			spellcheck="false"
			monospace />
	</n-form-item>

	<n-form-item label="格式化后的配置">
		<textarea
			:value="formattedNginxConfig"
			readonly
			rows="20"
			style="width: 100%; font-family: monospace" />
	</n-form-item>
</template>

<style lang="less" scoped>
.result-card {
	position: relative;
	.copy-button {
		position: absolute;
		top: 10px;
		right: 10px;
	}
}
</style>